<template>
  <div class="detail">
   <div class="header">
      <div class="s">
        <van-icon @click="bock" name="arrow-left" />
        <span>开团</span>
        <span></span>
      </div>
    </div>
    <div class="main">
      <p>
        <img :src="getDetail.img" alt />
      </p>
      <p>{{getDetail.name}}</p>
      <p>{{getDetail.dizhi}}</p>
      <p>
        活动时间：{{getDetail.time}}
        <span>已报名：{{getDetail.renshu}}人</span>
      </p>
      <h3>团购介绍</h3>
      <p class="p1">{{getDetail.jieshao}}</p>
      <h3>集合地址</h3>
      <input type="text" placeholder="输入集合地址">
      <h3>车辆牌号</h3>
      <input type="text" placeholder="请输入车辆牌号">
      <h3>集合时间</h3>
      <input type="text" placeholder="先择集合时间">
      <button class="btn" @click="kais">开团</button>
    </div>
  </div>
</template>
<script>
import axios from "../../src/axios/index";
import api from "../api/index";
export default {
  name: "Detail",
  data() {
    return {
      getDetail: [],
      id: ""
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.det();
  },
  methods: {
    det(id) {
      axios.get("/xiangqing", { params: { id: this.id } }).then(res => {
        this.getDetail = res.data;
        this.getDetails = res.haoma;
      });
    },
    kais(){

      this.$router.push("/tuan")
    },
    bock(){
      this.$router.go(-1)
    }
  }
};
</script>
<style scoped>
.detail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  width: 100%;
  height: 50px;
   background: rgb(46, 114, 241);
}
.s {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: #fff;
  font-size: 18px;
}
.main {
  width: 100%;
  height: auto;
  flex: 1;
  overflow-y: scroll;

}
img {
  width: 100%;
  height: 238px;
}
p {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
h3 {
  margin-top: 10px;
}
.p1 {
  color: #a7a7a7;
}
input{
  width: 90%;
  height: 40px;
  margin-top: 10px;
}
.btn {
  width: 100%;
  height: 50px;
  background: #169bd5;
  color: #fff;
  border: none;
  margin-top: 35px;
}
</style>